import './MixingAsphalt.scss'
import dayjs from 'dayjs'
import { DatePicker, Select, Spin, Result } from 'antd'
import { useEffect, useRef, useState } from 'react'
import { useMount, useRequest, useSize } from 'ahooks'
import { useLocation } from 'react-router-dom'
import {
    AreaStyle,
    AreaA01Template,
    DualAxesStyle,
    DualAxesA1Template,
    ColumnStyle,
    ColumnConfigA01Template,
} from './AssetsCharts'
import { FrontModalBox } from '../Modal'
import { Http } from '../../../../Common/Api'
import { TitleSmall001 } from '../Common/SmallTitle'
import { parseURLParams } from '../../../../Common/Configure/Common'

const { RangePicker } = DatePicker
export const MixingAsphaltA01 = () => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const [Active, setActive] = useState()
    const [Methods, setMethods] = useState('日统计')
    const StatisticalMethods = [
        { label: '年统计', value: '年统计' },
        { label: '月统计', value: '月统计' },
        { label: '日统计', value: '日统计' },
    ]
    const Mapping = ['沥青用量', '骨料1', '骨料2', '骨料3', '骨料4', '骨料5', '骨料6', '水泥', '矿粉', '再生料']
    const [NavList, setNavList] = useState()
    const { runAsync: getTop } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const data = res.list.map(({ uuid, organizationName }) => ({ label: organizationName, value: uuid }))
            setNavList(data)
            setActive(res.list[0].uuid)
        },
    })
    const { runAsync: getA01 } = useRequest(Http, {
        manual: true,
        onSuccess: res =>
            setDataA01(res.list.map(({ 出料时间, 出料温度 }) => ({ name: '温度', type: 出料时间, value: 出料温度 }))),
    })
    const { runAsync: getA02 } = useRequest(Http, {
        manual: true,
        onSuccess: res =>
            setDataA02(res.list.map(({ 出料时间, 油石比 }) => ({ name: '油石比', type: 出料时间, value: 油石比 }))),
    })
    const { runAsync: getA03 } = useRequest(Http, {
        manual: true,
        onSuccess: res =>
            setDataA03(
                res.list.map(({ 日期, 出料总量, 出料次数 }) => ({
                    type: 日期,
                    出料总量: 出料总量,
                    出料总次: 出料次数,
                })),
            ),
    })
    const { runAsync: getA04 } = useRequest(Http, {
        manual: true,
        onSuccess: res =>
            setDataA04(
                Mapping.map(key => ({ name: '总量', type: key, value: parseInt(Number(res[key]) * 100) / 100 || 0 })),
            ),
    })
    const [DateA01, setDateA01] = useState(dayjs())
    const [DateA02, setDateA02] = useState([dayjs(), dayjs()])
    useEffect(() => {
        if (Active) {
            getA02({
                url: 'getAsphaltAggregateRatioActList',
                data: { OrganizationUuid: Active, DischargingTime: DateA01.format('YYYY-MM-DD') },
            })
            getA01({
                url: 'getAsphaltMixingStationTemperatureList',
                data: { OrganizationUuid: Active, DischargingTime: DateA01.format('YYYY-MM-DD') },
            })
        }
    }, [getA01, getA02, DateA01, Active])
    useEffect(() => {
        if (Active) {
            const [Time1, Time2] = DateA02
            getA03({
                url: 'getAsphaltActStatistics',
                data: {
                    OrganizationUuid: Active,
                    BeginSecurityDate: Time1.format('YYYY-MM-DD'),
                    EndSecurityDate: Time2.format('YYYY-MM-DD'),
                    DateType: Methods,
                },
            })
        }
    }, [getA03, DateA02, Methods, Active])

    useEffect(() => {
        if (Active) {
            const [Time1, Time2] = DateA02
            getA04({
                url: 'getAsphaltActList',
                data: {
                    OrganizationUuid: Active,
                    BeginSecurityDate: Time1.format('YYYY-MM-DD'),
                    EndSecurityDate: Time2.format('YYYY-MM-DD'),
                },
            })
        }
    }, [getA04, DateA02, Active])

    useMount(() => {
        getTop({ url: 'getAsphaltMixingStationNameList' })
    })

    const [DataA01, setDataA01] = useState([])
    const [DataA02, setDataA02] = useState([])
    const [DataA03, setDataA03] = useState([])
    const [DataA04, setDataA04] = useState([])

    const [OptionsCall, setOptionsCall] = useState()
    const onClick = () => {
        if (Active && DateA02) {
            setOptionsCall({
                type: 'TableList',
                data: {
                    title: '沥青拌合站生产明细',
                    type: 'GettAsphaltMixingStationDetailTwo',
                    OrganizationUuid: Active,
                    list: DateA02,
                    uuid: true,
                },
            })
        }
    }
    return (
        <div className="MixingAsphaltA01">
            <div className="Top">
                {NavList &&
                    NavList.map(({ value, label }) => (
                        <div
                            key={value}
                            className={`${Active === value ? 'Active' : ''}`}
                            onClick={() => setActive(value)}
                        >
                            {label}
                        </div>
                    ))}
            </div>
            {Active ? (
                <div className="Btm">
                    <div className="Left">
                        <DatePicker value={DateA01} onChange={setDateA01} />
                        <TitleSmall001 title="温度分析" />
                        <div className="Charts" ref={ChartsBox} onClick={onClick}>
                            {size && (
                                <AreaA01Template
                                    size={size}
                                    data={DataA01}
                                    style={{ ...AreaStyle, YTitle: '摄氏度' }}
                                />
                            )}
                        </div>
                        <TitleSmall001 title="油石比分析" />
                        <div className="Charts" onClick={onClick}>
                            {size && (
                                <AreaA01Template
                                    size={size}
                                    data={DataA02}
                                    style={{ ...AreaStyle, YTitle: '百分比' }}
                                />
                            )}
                        </div>
                    </div>
                    <div className="Right">
                        <Select options={StatisticalMethods} value={Methods} onChange={setMethods} />
                        <RangePicker value={DateA02} onChange={setDateA02} />
                        <TitleSmall001 title="出料情况" />
                        <div className="Charts" onClick={onClick}>
                            {size && (
                                <DualAxesA1Template
                                    data={DataA03}
                                    size={size}
                                    style={{
                                        ...DualAxesStyle,
                                        value: '出料总量',
                                        count: '出料总次',
                                        YTitle: '料总量 / 万吨',
                                        YTitleB: '出料次数 / 次',
                                    }}
                                />
                            )}
                        </div>
                        <TitleSmall001 title="当天骨料实际用料总量" />
                        <div className="Charts" onClick={onClick}>
                            {size && (
                                <ColumnConfigA01Template
                                    size={size}
                                    data={DataA04}
                                    style={{ ...ColumnStyle, YTitle: 'kg' }}
                                />
                            )}
                        </div>
                    </div>
                </div>
            ) : (
                <Spin />
            )}
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}

export const MixingAsphaltA02 = ({ OrgEvent }) => {
    const { search } = useLocation()
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const [EmptyStatus, setEmptyStatus] = useState(false)
    const [Active, setActive] = useState()
    const [Methods, setMethods] = useState('日统计')

    OrgEvent.useSubscription(val => {
        if (val) setActive(val === '00000000-0000-0000-0000-000000000000' ? '' : val)
        else setEmptyStatus(true)
    })

    const StatisticalMethods = [
        { label: '年统计', value: '年统计' },
        { label: '月统计', value: '月统计' },
        { label: '日统计', value: '日统计' },
    ]
    const Mapping = ['沥青用量', '骨料1', '骨料2', '骨料3', '骨料4', '骨料5', '骨料6', '水泥', '矿粉', '再生料']
    const [NavList, setNavList] = useState()
    const { runAsync: getTop } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const data = res.list.map(({ uuid, organizationName }) => ({ label: organizationName, value: uuid }))
            setNavList(data)
            // setActive(res.list[0].uuid)
        },
    })
    const { runAsync: getA01 } = useRequest(Http, {
        manual: true,
        onSuccess: res =>
            setDataA01(res.list.map(({ 出料时间, 出料温度 }) => ({ name: '温度', type: 出料时间, value: 出料温度 }))),
    })
    const { runAsync: getA02 } = useRequest(Http, {
        manual: true,
        onSuccess: res =>
            setDataA02(res.list.map(({ 出料时间, 油石比 }) => ({ name: '油石比', type: 出料时间, value: 油石比 }))),
    })
    const { runAsync: getA03 } = useRequest(Http, {
        manual: true,
        onSuccess: res =>
            setDataA03(
                res.list.map(({ 日期, 出料总量, 出料次数 }) => ({
                    type: 日期,
                    出料总量: 出料总量,
                    出料总次: 出料次数,
                })),
            ),
    })
    const { runAsync: getA04 } = useRequest(Http, {
        manual: true,
        onSuccess: res =>
            setDataA04(
                Mapping.map(key => ({ name: '总量', type: key, value: parseInt(Number(res[key]) * 100) / 100 || 0 })),
            ),
    })
    const [DateA01, setDateA01] = useState(dayjs())
    const [DateA02, setDateA02] = useState([dayjs(), dayjs()])
    useEffect(() => {
        if (Active) {
            getA02({
                url: 'getAsphaltAggregateRatioActList',
                data: { OrganizationUuid: Active, DischargingTime: DateA01.format('YYYY-MM-DD') },
            })
            getA01({
                url: 'getAsphaltMixingStationTemperatureList',
                data: { OrganizationUuid: Active, DischargingTime: DateA01.format('YYYY-MM-DD') },
            })
        }
    }, [getA01, getA02, DateA01, Active])
    useEffect(() => {
        if (Active) {
            const [Time1, Time2] = DateA02
            getA03({
                url: 'getAsphaltActStatistics',
                data: {
                    OrganizationUuid: Active,
                    BeginSecurityDate: Time1.format('YYYY-MM-DD'),
                    EndSecurityDate: Time2.format('YYYY-MM-DD'),
                    DateType: Methods,
                },
            })
        }
    }, [getA03, DateA02, Methods, Active])

    useEffect(() => {
        if (Active) {
            const [Time1, Time2] = DateA02
            getA04({
                url: 'getAsphaltActList',
                data: {
                    OrganizationUuid: Active,
                    BeginSecurityDate: Time1.format('YYYY-MM-DD'),
                    EndSecurityDate: Time2.format('YYYY-MM-DD'),
                },
            })
        }
    }, [getA04, DateA02, Active])

    useMount(() => {
        getTop({ url: 'getAsphaltMixingStationNameList' })
    })

    const [DataA01, setDataA01] = useState([])
    const [DataA02, setDataA02] = useState([])
    const [DataA03, setDataA03] = useState([])
    const [DataA04, setDataA04] = useState([])

    const [OptionsCall, setOptionsCall] = useState()
    const onClick = () => {
        if (Active && DateA02) {
            setOptionsCall({
                type: 'TableList',
                data: {
                    title: '沥青拌合站生产明细',
                    type: 'GettAsphaltMixingStationDetailTwo',
                    OrganizationUuid: Active,
                    list: DateA02,
                    uuid: parseURLParams(search).uuid,
                },
            })
        }
    }
    return (
        <div className="MixingAsphaltA01">
            {EmptyStatus ? (
                <div className="EmptyStatus">
                    <Result status="404" title="暂无匹配数据" />
                </div>
            ) : Active ? (
                <div className="Btm">
                    <div className="Left">
                        <DatePicker value={DateA01} onChange={setDateA01} />
                        <TitleSmall001 title="温度分析" />
                        <div className="Charts" ref={ChartsBox} onClick={onClick}>
                            {size && (
                                <AreaA01Template
                                    size={size}
                                    data={DataA01}
                                    style={{ ...AreaStyle, YTitle: '摄氏度' }}
                                />
                            )}
                        </div>
                        <TitleSmall001 title="油石比分析" />
                        <div className="Charts" onClick={onClick}>
                            {size && (
                                <AreaA01Template
                                    size={size}
                                    data={DataA02}
                                    style={{ ...AreaStyle, YTitle: '百分比' }}
                                />
                            )}
                        </div>
                    </div>
                    <div className="Right">
                        <Select options={StatisticalMethods} value={Methods} onChange={setMethods} />
                        <RangePicker value={DateA02} onChange={setDateA02} />
                        <TitleSmall001 title="出料情况" />
                        <div className="Charts" onClick={onClick}>
                            {size && (
                                <DualAxesA1Template
                                    data={DataA03}
                                    size={size}
                                    style={{
                                        ...DualAxesStyle,
                                        value: '出料总量',
                                        count: '出料总次',
                                        YTitle: '料总量 / 万吨',
                                        YTitleB: '出料次数 / 次',
                                    }}
                                />
                            )}
                        </div>
                        <TitleSmall001 title="当天骨料实际用料总量" />
                        <div className="Charts" onClick={onClick}>
                            {size && (
                                <ColumnConfigA01Template
                                    size={size}
                                    data={DataA04}
                                    style={{ ...ColumnStyle, YTitle: 'kg' }}
                                />
                            )}
                        </div>
                    </div>
                </div>
            ) : (
                <Spin />
            )}
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}

export const MixingAsphaltA03 = ({ OrgEvent }) => {
    const { search } = useLocation()
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const [EmptyStatus, setEmptyStatus] = useState(false)
    const [Active, setActive] = useState()
    const [Methods, setMethods] = useState('日统计')

    OrgEvent.useSubscription(val => {
        if (val) setActive(val === '00000000-0000-0000-0000-000000000000' ? '' : val)
        else setEmptyStatus(true)
    })

    const StatisticalMethods = [
        { label: '年统计', value: '年统计' },
        { label: '月统计', value: '月统计' },
        { label: '日统计', value: '日统计' },
    ]
    const Mapping = ['沥青用量', '骨料1', '骨料2', '骨料3', '骨料4', '骨料5', '骨料6', '水泥', '矿粉', '再生料']
    const [NavList, setNavList] = useState()
    const { runAsync: getTop } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const data = res.list.map(({ uuid, organizationName }) => ({ label: organizationName, value: uuid }))
            setNavList(data)
            // setActive(res.list[0].uuid)
        },
    })
    const { runAsync: getA03 } = useRequest(Http, {
        manual: true,
        onSuccess: res =>
            setDataA03(
                res.list.map(({ 日期, 出料总量, 出料次数 }) => ({
                    type: 日期,
                    出料总量: 出料总量,
                    出料总次: 出料次数,
                })),
            ),
    })
    const { runAsync: getA04 } = useRequest(Http, {
        manual: true,
        onSuccess: res =>
            setDataA04(res.list.map(({ 出料总量, 材料名称 }) => ({ name: '数量', type: 材料名称, value: 出料总量 }))),
    })
    const [DateA02, setDateA02] = useState([dayjs(), dayjs()])

    useEffect(() => {
        if (Active) {
            const [Time1, Time2] = DateA02
            getA03({
                url: 'getCementMixingStatistics',
                data: {
                    OrganizationUuid: Active,
                    BeginSecurityDate: Time1.format('YYYY-MM-DD'),
                    EndSecurityDate: Time2.format('YYYY-MM-DD'),
                    DateType: Methods,
                },
            })
        }
    }, [getA03, DateA02, Methods, Active])

    useEffect(() => {
        if (Active) {
            const [Time1, Time2] = DateA02
            getA04({
                url: 'getCementMixingActList',
                data: {
                    OrganizationUuid: Active,
                    BeginSecurityDate: Time1.format('YYYY-MM-DD'),
                    EndSecurityDate: Time2.format('YYYY-MM-DD'),
                },
            })
        }
    }, [getA04, DateA02, Active])

    useMount(() => {
        getTop({ url: 'getAsphaltMixingStationNameList' })
    })

    const [DataA03, setDataA03] = useState([])
    const [DataA04, setDataA04] = useState([])

    const [OptionsCall, setOptionsCall] = useState()
    const onClick = () => {
        if (Active && DateA02) {
            setOptionsCall({
                type: 'TableList',
                data: {
                    title: '水泥拌合站生产明细',
                    type: 'CementMixingStationGroupDetail',
                    OrganizationUuid: Active,
                    list: DateA02,
                    uuid: parseURLParams(search).uuid,
                },
            })
        }
    }
    // const onClick = () => {
    //     if (Active && DateA02) {
    //         setOptionsCall({
    //             type: 'TableList',
    //             data: {
    //                 title: '沥青拌合站生产明细',
    //                 type: 'GettAsphaltMixingStationDetailTwo',
    //                 OrganizationUuid: Active,
    //                 list: DateA02,
    //                 uuid: parseURLParams(search).uuid,
    //             },
    //         })
    //     }
    // }
    return (
        <div className="MixingAsphaltA01">
            {EmptyStatus ? (
                <div className="EmptyStatus">
                    <Result status="404" title="暂无匹配数据" />
                </div>
            ) : Active ? (
                <div className="Btm">
                    <div className="Right">
                        <Select options={StatisticalMethods} value={Methods} onChange={setMethods} />
                        <RangePicker value={DateA02} onChange={setDateA02} />
                        <TitleSmall001 title="出料情况" />
                        <div className="Charts" ref={ChartsBox} onClick={onClick}>
                            {size && (
                                <DualAxesA1Template
                                    data={DataA03}
                                    size={size}
                                    style={{
                                        ...DualAxesStyle,
                                        value: '出料总量',
                                        count: '出料总次',
                                        YTitle: '料总量 / 万吨',
                                        YTitleB: '出料次数 / 次',
                                    }}
                                />
                            )}
                        </div>
                        <TitleSmall001 title="当天骨料实际用料总量" />
                        <div className="Charts" onClick={onClick}>
                            {size && (
                                <ColumnConfigA01Template
                                    size={size}
                                    data={DataA04}
                                    style={{ ...ColumnStyle, YTitle: 'kg' }}
                                />
                            )}
                        </div>
                    </div>
                </div>
            ) : (
                <Spin />
            )}
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}
